<template>
  <f7-page
    ptr
    @ptr:refresh="refresh"
    infinite
    :infinite-distance="50"
    :infinite-preloader="true"
    @infinite="infinite"
  >
    <f7-navbar :sliding="false">
      <f7-nav-left>
        <f7-link back icon-material="arrow_back"></f7-link>
      </f7-nav-left>
      <f7-nav-title sliding>自定义搜索</f7-nav-title>
      <f7-nav-right></f7-nav-right>
    </f7-navbar>
    <!-- <f7-user-navbar title="自定义搜索"></f7-user-navbar> -->

    <f7-custom-searchbar
      :delay="2000"
      search-container=".search-list"
      search-in=".item-text"
      @search="searchQuery"
      v-model="search.appName"
    ></f7-custom-searchbar>

    <f7-list media-list class="search-list">
      <f7-list-item
        v-for="item in query.data"
        :key="item.appId"
        :title="item.appName"
        :text="item.packageName"
        :after="item.appCode"
      ></f7-list-item>
    </f7-list>
  </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";

export default class instance extends controller {
  disableCache() {
    return false;
  }
  onBeforeInit() {
    this.urls = {
      // 列表请求，对应后台的返回PagerInfo的query列表查询接口
      query: "/api/app/mobileApp/query",
      // 这个比较随意，如果返回实体信息，一般建议把实体放在ViewModel里，然后返回ViewModel
      model: "",
    };
  }

  mixin() {
    return {
      data() {
        return {
          var1: "变量1",
          var2: "变量2",
        };
      },
      methods: {
        func1() {},
        func2() {},
      },
      computed: {},
      beforeCreate() {
        console.log("vue beforeCreate");
      },
      created() {
        console.log("vue created");
      },
      beforeMount() {
        console.log("vue beforeMount");
      },
      mounted() {
        console.log("vue mounted");
      },
    };
  }
}
</script>

<style scoped>
</style>